<template>
  <div>
    <el-dialog :visible.sync="show" title="权限分配" @close="close">
      <el-tree
        ref="tree"
        :data="list"
        :props="{label:'name'}"
        show-checkbox
        node-key="id"
        :default-checked-keys="permIds"
      />
      <template #footer>
        <div style="text-align: center;">
          <el-button type="primary" @click="qr">确认</el-button>
          <el-button>取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>

import { syspermission } from '@/api/quanxian'
import { dfdga } from '@/utils/index'
import { sysroleid, sysroleassignPrem } from '@/api/gonshi'
export default {

  data() {
    return {
      list: [],
      show: false,
      permIds: [],
      id: ''
    }
  },

  // created() {
  //   this.getdata()
  // },

  methods: {

    // 完成内容布局
    async getdata() {
      // 布局内容是用请求得来的，每次点击打开弹出框都请求，浪费性能
      if (this.list.length === 0) {
        const res = await syspermission()
        this.list = dfdga(res.data.data)
      }
    },

    // 回显数据
    async fpqxhx(id) {
      const res = await sysroleid(id)

      this.id = id
      this.permIds = res.data.data.permIds

      console.log(id, 'dsafadfaf')
    },
    // 给角色分配权限
    async qr() {
      await sysroleassignPrem({
        id: this.id,
        permIds: this.$refs.tree.getCheckedKeys()
      })
      this.$message.success('分配成功')
    },
    // 关闭弹出框清空默认勾选,
    /*
      俩种情况
        a.一种是每次打开页面都刷新，但是太浪费性能所有做了判断
          但是default-checked-keys只管勾选，不管取消，
          那样子每次点击默认勾选就会叠加
          利用tree内部方法清空默认勾选
        如果保存树形数据每次都刷新()就不用，不推荐做法(打开第二个框会存在上一次数据0.5秒)
    */

    close() {
      this.$refs.tree.setCheckedKeys([])
    }

  }

}
</script>

<style>

</style>
